<template>
  <div class="site-classification-cascader">
    <a-cascader
      v-bind="$attrs"
      change-on-select
      :options="SITE_CLASSIFICATION"
      :field-names="{ label: 'name', value: 'id', children: 'subcateg' }"
      placeholder="请选择本地分类/子类"
      :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
    >
      <template #suffixIcon>
        <a-tooltip placement="top" color="#fff">
          <template #title> 双击选中父级 </template>
          <div class="ellipsis-text">
            <question-circle-outlined />
          </div>
        </a-tooltip>
      </template>
    </a-cascader>
  </div>
</template>

<script lang="ts" setup name="SiteClassificationCascader">
import { SITE_CLASSIFICATION } from '@/stores/modules/collect-manage/select-data-source'
import type {
  SiteClassificationItemType,
  SiteClassificationType
} from '@/stores/modules/collect-manage/select-data-source'

type IdsType = string[]
type ListType = { name: string; id: string }[]

// 去源分类数据 根据 selectIds 去站点分类数据种匹配出对应 id的数据
const findConformingData = (ids: IdsType = []) => {
  let list: ListType = []
  SITE_CLASSIFICATION.value.forEach((f: SiteClassificationType) => {
    if (ids.includes(f.id)) {
      console.log('f: ', f)
      list.push({
        id: f?.id ?? undefined,
        name: f?.name ?? undefined
      })

      if (f.subcateg.length) {
        f.subcateg.forEach((f2: SiteClassificationItemType) => {
          if (ids.includes(f2.id)) {
            list.push({
              id: f2?.id ?? undefined,
              name: f2?.name ?? undefined
            })
          }
        })
      }
    }
  })
  return list
}

defineExpose({ findConformingData })
</script>

<!-- <style lang="less" scoped>
.site-classification-cascader {
}
</style> -->
